// components/com1a/com1a.js

//  定义纯数据字段
Component({
   options: {
      styleIsolation: 'isolated',
      pureDataPattern: /^_/
   },
   /**
    * 组件的属性列表
    */
   properties: {
      aa: {
         type: [Object, String],
         value: '1222'
      },
      arrry: {
         type: Array,
         value: []
      },
      bb: Number
   },

   /**
    * 组件的初始数据
    */
   data: {
      _rgb: {
         r: 0,
         g: 0,
         b: 0
      },

      rgb: {
         r: 0,
         g: 0,
         b: 0
      },
      nn: 123,
      mm: 456,




      n1: 111,
      n2: 222,
      flag: true,
      obj: {
         m1: 10,
         m2: 20
      },
      arr: [1, 2, 3, 4],
      arr2: [{
         id: 1,
         name: "jack"
      },
      {
         id: 2,
         name: "jack"
      },


      ],
      fff: true
   },

   /**
    * 组件的方法列表
    */
   // watch:{
   //    "n1":function(newval,oldVal){

   //    }
   // },
   observers: {
      "n1,n2": function (newval, newval2) {
         console.log(newval, newval2, 666);
      },
      "n2": function (newval2) {
         console.log(newval2, 777);
      },
      "obj.m1,obj.m2": function (newVal, newVal2) {
         console.log(newVal, newVal2, 5555);
      },

      "obj.m1": function (newVal) {
         console.log(newVal, 11112222333);
      },
      "arr": function (val) {
         console.log(val, 3333);
      },
      "arr2[0].name": function (val) {
         console.log(val, 22233);
      }
   },
   methods: {
      btn1() {
         console.log(this, 1111);
         this.setData({
            bb: ++this.properties.bb,
            n2: this.data.n2 + 1,
            obj: {
               m1: 11,
               m2: 21
            },
            "obj.m1": 222,
            arr: [...this.data.arr, 5],

            "arr2[0].id": 22,
            fff: false
         })
      },


      btnR() {
         this.setData({
            "rgb.r": this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
         })
      },
      btnG() {
         this.setData({
            "rgb.g": this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
         })
      },
      btnB() {
         this.setData({
            "rgb.b": this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
         })
      }
   },
   lifetimes: {
      created() {
         //   created
         //  这里可以操作data中的数据    并且可以更改数据   ===vue==created
         this.setData({
            nn: '======111111'
         })
         console.log(this.data.nn, 'created');
      },
      attached() {
         //   mounted
         this.setData({
            mm: "=====222222"
         })
         console.log(this.data.mm, 'attached');
      },

      detached() {
         console.log(1112221);
      }
   }
})